<template>
  <!-- 垃圾分类打卡页面 -->
  <view>
    <!-- 整个box -->
    <view class="box">
      <!-- 打卡信息 -->
      <view class="box2">
        <view style="font-size: large;font-weight: bold;color: #6A6A6A;">打卡信息</view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">姓名：</view>
          <view class="input">{{userInfo.name}}</view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">手机号：</view>
          <view class="input">{{userInfo.tel}}</view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">打卡地址：</view>
          <view class="input" ><input type="text" name="address" v-model="address" placeholder="请输入打卡地址"></view>
        </view>
        <view>
          <view class="text">拍照：</view>
          <view>
            <u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple :maxCount="3"></u-upload>
          </view>
        </view>
      </view>
      <view class="submit" @click="addRefuseClassification">提交</view>
    </view>
  </view>
</template>

<script>
  //获取应用实例
  const app = getApp()
  // 按需导入 mapState ,mapMutations,mapGetters 辅助函数
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        address:'',//打卡地址
        fileList3: [],
        
      };
    },
    computed: {
      // 将 m_user 模块中的 userType 数据映射到当前页面中使用
      ...mapState('m_user', ['userType', 'userInfo']),
    },
    methods: {
      async addRefuseClassification(){
        // if(this.address!=='' && this.img!==""){
        console.log(this.fileList3.length)
        //若为空
        if(this.address==='' || this.fileList3.length===0)  return uni.$showMsg("打卡地址和图片不能为空！")
        // 不为空
        var refuseclass={};
        refuseclass.uid=this.userInfo.id;
        refuseclass.address=this.address;
        var imgstr='';
        for(var i=0;i<this.fileList3.length;i++){
          imgstr+=this.fileList3[i].url+';'//多个url之间用 ; 分割
        }
        refuseclass.img=imgstr;
        refuseclass.status='审核中';
        refuseclass.createTime=uni.$getDateTime(new Date());
        const {data: res} = await uni.$http.post('/refuseclassification/addrefuseclassification',refuseclass)
        if (res.status !== 200) return uni.$showMsg()
        if(res.data.isok===true){//新增打卡成功
          uni.$showMsg("打卡成功，等待管理员审核~")
          setTimeout(() => {
            uni.redirectTo({
              url: '/subpkg/jifen-detail/jifen-detail'
            })
          }, 2000)
        }
      },
      // 上传图片对应的方法
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
        console.log(event.name)
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
    		  lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
    			   }))
          fileListLen++
        }
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
           url: app.globalData.baseUrl+'/qiniu/testUpload', // Spring Boot接口地址
           filePath: url,
           name: 'file',
           formData: {
             user: 'test'
           },
           success: (res) => {
             setTimeout(() => {
               resolve(res.data)
             }, 1000)
           }
          });
        })
      },
    }
  }
</script>

<style lang="scss">
  .box {
    padding: 30rpx;
  }

  .box1,
  .box2 {
    // border-radius: 30rpx;
    margin-bottom: 30rpx;
    padding: 25rpx;
    box-shadow: 0 0 15rpx #999999
  }

  .box1>view,
  .box2>view {
    padding: 10rpx;
    display: flex;
    margin-bottom: 10rpx;
    font-family: Microsoft YaHei;

    color: #333333;
  }

  .text {
    width: 30%;
    text-align: left;
    overflow: auto;
  }


  .submit {
    background-color: #1599FD;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    border-radius: 15rpx;
    line-height: 100rpx;
    height: 100rpx;
  }
</style>
